<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>报价</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" type="text/css" href="../../common/bootstrap/css/bootstrap.css" media="all">
	<link rel="stylesheet" type="text/css" href="../../common/layui/css/layui.css" media="all">
	<link rel="stylesheet" type="text/css" href="../../common/global.css" media="all">
	<link rel="stylesheet" type="text/css" href="../../css/customer_list.css" media="all">
	<link rel="stylesheet" type="text/css" href="../../common/module/formSelects/formSelects-v4.css" media="all">
</head>
<style>
	.layui-table-cell {
		white-space: normal !important; /* 允许多行显示 */
		word-break: break-all;          /* 长单词或 URL 地址换行 */
	}

	tbody tr .layui-table-cell {
		height: auto !important;
	}
	.layui-form-item .layui-input-inline {
		font-size: 14px;
		/*width: 210px;*/
		width: 250px;
		margin-right: 10px;
	}
	.layui-input-block {
		margin-left: 95px;
	}
	.main_content_wrap{
		margin-top: 0px;
	}

	.layui-form-item .file-info {
		float: left;
		width: 400px;
		margin-right: 10px;
	}
	.layui-form-item .file-icon {
		float: left;
		width: 95px;
		margin-left: 10px;
	}
	.detail_wrap{
		padding: 0 50px;
	}
	.max_w{
		max-width: 950px;
	}
	.order_massage{
		width: 100%;
		margin-left: 30px;
		font-size: 14px;
	}
	.order_massage li{
		padding: 20px 10px;
	}
	.order_massage li:first-child{
		padding-top: 0px;
	}
	.order_massage li:last-child{
		border-bottom: none;
	}
	.order_massage_title{
		float: left;
		width: 22%;
	}
	.order_address_title{
		float: left;
		width: 50%;
	}
	.state_icon{
		width: 100px;
		height: auto;
		position: absolute; /* 使用绝对定位 */
		top: 15%;
		right: 10%;
		object-fit: cover;  /* 确保图片适应容器 */
	}
	.price{
		width: 100%;
		text-align: center;
		height: 28px;
		line-height: 28px;
		background:none;
		border-top: none;
		border-right: none;
		border-left: none;
		border-bottom: 1px solid #ccc;
	}

	.no_up{
		height: 60px;
		width: 100%;
		outline: none;
		cursor:not-allowed;
		background-color: #f3f2f2;
	}

	input::placeholder {
		color: #c0bebe; /* 设置 placeholder 的字体颜色为红色 */
	}
</style>
<body>
<!-- 添加车辆和司机 -->
<div class="layui-fluid content_box">
	<div class="main_content_wrap">
		<form class="layui-form add_form" lay-filter="addForm" id="addForm" action="">
			<p class="add_title">基础信息</p>
			<div class="layui-card-body" id="orderView">
			</div>
			<input hidden name="id" />
			<p class="add_title">零件清单</p>
			<div class="detail_wrap">
				<table class="layui-table max_w" id="infoTable" lay-filter="infoTable"></table>
			</div>
			<!-- 按钮 -->
			<div class="layui-form-item text-center">
				<div class="layui-input-block" style="max-width: none">
					<button class="layui-btn btn-red site-demo-active" style="margin-right: 10%" id="abandon">放弃报价</button>
					<button class="layui-btn site-demo-active" lay-filter="addFormSubmit" style="margin-right: 10%" lay-submit>提交报价</button>
<!--					<button class="layui-btn site-demo-active" lay-filter="zancunFormSubmit" lay-submit>暂存</button>-->
				</div>
			</div>
		</form>
	</div>
</div>
<script id="orderDetail" type="text/html">
	<ul class='order_massage'>
		<li>
			<span class="order_massage_title">询价单号：{{d.bus_inquiry_no}}</span>
			<span class="order_massage_title">询价日期：{{d.add_datetime}}</span>
			<span class="order_massage_title">到期时间：{{d.deadline_datetime?d.deadline_datetime:''}}</span>
			<span class="">
				{{# if(d.inquiry_state == 3){ }}
				<img src="../../img/closed.png" class="state_icon">
				{{# }else if(d.state == 4){ }}
				<img src="../../img/abandon.png" class="state_icon">
				{{# }else if(d.state==3){ }}
				<img src="../../img/returned.png" class="state_icon">
				{{# }else if(d.state==7){ }}
				<img src="../../img/unchoose.png" class="state_icon">
				{{# }else if(d.state==2 || d.state > 4){ }}
				<img src="../../img/quoted.png" class="state_icon">
				{{# }else{ }}
				<img src="../../img/pending_quotation.png" class="state_icon">
				{{# } }}
			</span>
			<span class="order_massage_title">询价人：{{d.add_user_name?d.add_user_name:''}}</span>
		</li>
		<li>
			<span class="order_massage_title">车牌号：{{d.vehicle_license_num?d.vehicle_license_num:''}}</span>
			<span class="order_massage_title">车架号：{{d.vehicle_frame_no}}</span>
			<span class="order_massage_title">车辆品牌：{{d.brand_name?d.brand_name:''}}</span>
			<span class="order_massage_title">车型名称：{{d.car_model?d.car_model:''}}</span>
		</li>
		<li>
			<span class="order_massage_title" style="font-weight: bold">备注：{{d.common?d.common:''}}</span>
		</li>
	</ul>
</script>
<script type="text/html" id="eq_name">
	<div>{{d.eq_name}}</div>
	<div>{{d.inquiry_common? '备注：'+d.inquiry_common:''}}</div>
</script>

<script type="text/html" id="serviceTpl">
	{{# if(d.id > 0){ }}
	{{# if(d.qulity_service_state == 1){ }}
	{{# if(d.state < 3 || d.state == 4){ }}
	<input type="text" name="qulity_service_price" value="{{d.qulity_service_price>0?d.qulity_service_price:''}}"  autocomplete="off" lay-filter="layui-input" class="layui-input price" lay-verify="num" placeholder="价格">
	{{# }else{ }}
	<span class="layui-input price">{{d.qulity_service_price>0?d.qulity_service_price:''}}</span>
	{{# } }}
	{{# }else{ }}
	<div contenteditable="false" class="no_up"></div>
	{{# } }}
	{{# }else{ }}
	{{d.qulity_service_price}}
	{{# } }}
</script>

<script type="text/html" id="orgTpl">
	{{# if(d.id > 0){ }}
	{{# if(d.qulity_org_state == 1){ }}
	{{# if(d.state < 3 || d.state == 4){ }}
	<input type="text" name="qulity_org_price" value="{{d.qulity_org_price>0?d.qulity_org_price:''}}" autocomplete="off" lay-filter="layui-input" class="layui-input price" lay-verify="num" placeholder="价格">
	{{# }else{ }}
	<span class="layui-input price">{{d.qulity_org_price>0?d.qulity_org_price:''}}</span>
	{{# } }}
	{{# }else{ }}
	<div contenteditable="false" class="no_up"></div>
	{{# } }}
	{{# }else{ }}
	{{d.qulity_org_price}}
	{{# } }}
</script>

<script type="text/html" id="matchingTpl">
	{{# if(d.id > 0){ }}
	{{# if(d.qulity_matching_state == 1){ }}
	{{# if(d.state < 3 || d.state == 4){ }}
	<input type="text" name="qulity_matching_price" value="{{d.qulity_matching_price>0?d.qulity_matching_price:''}}" autocomplete="off" lay-filter="layui-input" class="layui-input price" placeholder="价格">
	{{# }else{ }}
	<span class="layui-input price">{{d.qulity_matching_price>0?d.qulity_matching_price:''}}</span>
	{{# } }}
	<input type="text" name="qulity_matching_common" value="{{d.qulity_matching_common?d.qulity_matching_common:''}}"  autocomplete="off" lay-filter="layui-input" class="layui-input price" placeholder="备注">
	{{# }else{ }}
	<div contenteditable="false" class="no_up"></div>
	{{# } }}
	{{# }else{ }}
	{{d.qulity_matching_price}}
	{{# } }}
</script>

<script type="text/html" id="completeTpl">
	{{# if(d.id > 0){ }}
	{{# if(d.qulity_complete_state == 1){ }}
	{{# if(d.state < 3 || d.state == 4){ }}
	<input type="text" name="qulity_complete_price" value="{{d.qulity_complete_price>0?d.qulity_complete_price:''}}" autocomplete="off" lay-filter="layui-input" class="layui-input price" placeholder="价格">
	{{# }else{ }}
	<span class="layui-input price">{{d.qulity_complete_price>0?d.qulity_complete_price:''}}</span>
	{{# } }}
	<input type="text" name="qulity_complete_common" value="{{d.qulity_complete_common?d.qulity_complete_common:''}}"  autocomplete="off" lay-filter="layui-input" class="layui-input price" placeholder="备注">
	{{# }else{ }}
	<div contenteditable="false" class="no_up"></div>
	{{# } }}
	{{# }else{ }}
	{{d.qulity_complete_price}}
	{{# } }}
</script>

<script type="text/html" id="suitableTpl">
	{{# if(d.id > 0){ }}
	{{# if(d.qulity_suitable_state == 1){ }}
	{{# if(d.state < 3 || d.state == 4){ }}
	<input type="text" name="qulity_suitable_price" value="{{d.qulity_suitable_price>0?d.qulity_suitable_price:''}}" lay-filter="layui-input" autocomplete="off" class="layui-input price" placeholder="价格">
	{{# }else{ }}
	<span class="layui-input price">{{d.qulity_suitable_price>0?d.qulity_suitable_price:''}}</span>
	{{# } }}
	<input type="text" name="qulity_suitable_common" value="{{d.qulity_suitable_common?d.qulity_suitable_common:''}}"  autocomplete="off" lay-filter="layui-input" class="layui-input price" placeholder="备注">
	{{# }else{ }}
	<div contenteditable="false" class="no_up"></div>
	{{# } }}
	{{# }else{ }}
	{{d.qulity_suitable_price}}
	{{# } }}
</script>

<!--放弃报价-->
<script type="text/html" id="cancleForm">
	<form lay-filter="cancleForm" class="layui-form model-form">
		<input name="id" hidden/>
		<div class="layui-form-item">
			<label class="layui-form-label">备注:</label>
			<div class="layui-input-inline">
				<textarea name="common" placeholder="请输入理由" class="layui-textarea" lay-verify="required" required></textarea>
			</div>
		</div>
		<div class="layui-form-item text-center">
			<button class="layui-btn" type="button" ew-event="closeDialog">取消</button>
			<button type="button" lay-filter="cancleFormSubmit" lay-submit class="layui-btn site-demo-active">确认</button>
		</div>
	</form>
</script>

<script type="text/javascript" src="../../js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../../js/jquery.cookie.js"></script>
<script type="text/javascript" src="../../common/layui/layui2.js"></script>
<script type="text/javascript" src="../../js/common.js"></script>
<script type="text/javascript" src="../../js/main.js"></script>
<script type="text/javascript" src="../../jsplug/xm-select.js"></script>
<script>
	var id = GetQueryString('id');
	layui.use(['jquery','form','upload','laydate', 'admin','table','formSelects','laytpl'], function(){
		var $ = layui.jquery;
		var form = layui.form;
		var table = layui.table;
		var upload = layui.upload;
		var laydate = layui.laydate;
		var formSelects = layui.formSelects;
		var admin = layui.admin;
		var laytpl = layui.laytpl;
		var tableIns;
		var res_data = {};
		var scrollPosition = {
			table: 0, // 表格容器的滚动位置
			parent: 0 // 父容器的滚动位置（如果适用）
		};
		laydate.render({
			elem: '#deadline_datetime'
			,trigger: 'click',
			type: 'datetime', // 设置类型为 datetime
			format: 'yyyy-MM-dd HH', // 设置显示格式
		});
		form.render();

		var detailList = [];

        var DISABLED = 'layui-btn-disabled';

		getInfo();
		function getInfo(){
			send_req('Inquiry/getInfo', {id:id}, function (data) {
				res_data = data;
				if(res_data.state == 4){
					$('.layui-btn').hide();
				}
				var orderDetail = document.getElementById('orderDetail');
				var getTpl = orderDetail.innerHTML;
				var view = document.getElementById('orderView');
				laytpl(getTpl).render(data, function(html){
					view.innerHTML = html;
				});
				detailList = data.detail_info;

				tableIns = table.render({
					elem: '#infoTable',
					id:'infoTable',
					limit:100,
					data:detailList,
					page: false,
					cols: [[
						{type: 'numbers', title: '序号'},
						{field: 'eq_name', title: '零件名称',templet: '#eq_name',width:200},
						{field: 'oe_no', title: '0E码',edit: true,width:200},
						{align: 'center',field: 'num', title: '数量',width:80},
						{align: 'center',field: 'qulity_service_price',  title: '服务站价',templet: '#serviceTpl'},
						{align: 'center',field: 'qulity_org_price',      title: '原厂原包件价',templet: '#orgTpl'},
						{align: 'center',field: 'qulity_matching_price', title: '配套件价',templet: '#matchingTpl'},
						{align: 'center',field: 'qulity_complete_price', title: '品牌件价',templet: '#completeTpl'},
						{align: 'center',field: 'qulity_suitable_price', title: '适用件',templet: '#suitableTpl'},
						{align: 'center',field: 'common', title: '备注',edit: true},
					]],
					done: function (res, curr, count) {
						form.render();
						var tableContainer = document.querySelector('#infoTable').parentElement;
						tableContainer.scrollTop = scrollPosition.table;
						// 如果有父容器，也恢复父容器的滚动位置
						if (scrollPosition.parent !== undefined) {
							document.documentElement.scrollTop = scrollPosition.parent || document.body.scrollTop;
						}
					}
				});
			});
		}
		form.render();


		$('#abandon').click(function () {
			admin.open({
				type: 1,
				area: '500px',
				offset: '65px',
				title: '放弃报价',
				content: $('#cancleForm').html(),
				success: function (layero, index) {
					$(layero).children('.layui-layer-content').css('overflow', 'visible');
					form.val('cancleForm', res_data);
					form.render();
				}
			});
			return false;
		});

		form.on('submit(cancleFormSubmit)', function (d) {
			// 增加样式
			$('.site-demo-active').addClass(DISABLED);
			// 增加属性
			$('.site-demo-active').attr('disabled', 'disabled');
			layer.load(); //上传loading
			send_req('Inquiry/abandonInquiry', d.field, function (res) {
				layer.msg('提交成功', {icon: 1},function (){
					layer.closeAll('page');
					layer.closeAll('loading');
				});
			},false);
			return false;
		});
		$(document).on('focus', '.price', function() {
			if ($(this).val() == 0) {
				$(this).val(''); // 如果值是'0'，则将其清空
			}
			form.render();
		}).on('blur', '.price', function() {
			var num = Number($(this).val());
			if (isNaN(num) || num < 0) {
				$(this).val(''); // 如果值是'0'，则将其清空
			}
			form.render();
		});

		document.getElementById('addForm').addEventListener('change', function(event) {
			// 确保我们只监听 input 元素
			if (event.target.tagName.toLowerCase() === 'input' && event.target.classList.contains('layui-input')) {
				// 获取输入框的新值
				var newValue = event.target.value;
				var qulity = event.target.name;

				// 如果需要获取当前行的数据，可以这样做：
				var tr = event.target.closest('tr'); // 获取最近的 tr 祖先元素
				var index = tr.getAttribute('data-index');

				var tag_type = ['qulity_service_price','qulity_org_price','qulity_matching_price','qulity_complete_price','qulity_suitable_price','qulity_service_common','qulity_org_common','qulity_matching_common','qulity_complete_common','qulity_suitable_common'];
				var tag_type_price = ['qulity_service_price','qulity_org_price','qulity_matching_price','qulity_complete_price','qulity_suitable_price'];
				if(tag_type.includes(qulity)) { //修改价格
					if(tag_type_price.includes(qulity)){
						newValue = Number(newValue);
						if(isNaN(newValue) || newValue < 0){
							layer.msg('请输入正确的价格！');
							return false;
						}
						var oldValue = table.cache['infoTable'][index][qulity];
						oldValue = oldValue?oldValue:0
						var diff = parseFloat(newValue) - parseFloat(oldValue)
						var oldTotal = parseFloat(table.cache['infoTable'][table.cache['infoTable'].length-1][qulity]);
						table.cache['infoTable'][table.cache['infoTable'].length-1][qulity] = parseFloat(oldTotal + diff).toFixed(0)
					}
					table.cache['infoTable'][index][qulity] = newValue;
					form.render(); // 更新渲染
					reloadTable()
					var info = {
						'tag_name':qulity,
						'id':table.cache['infoTable'][index].id,
						'bus_inquiry_suppliers_id':table.cache['infoTable'][index].bus_inquiry_suppliers_id,
						'value':newValue
					};
					setContent(info);
				}
			}
		});

		function reloadTable(info='') {
			var tableContainer = document.querySelector('#infoTable').parentElement;
			scrollPosition.table = tableContainer.scrollTop; // 保存表格容器的滚动位置
			// 如果有父容器，保存父容器的滚动位置
			scrollPosition.parent = document.documentElement.scrollTop || document.body.scrollTop;
			// 表格重载
			tableIns.reload({
				data: info?info:table.cache['infoTable']
			});
		}
		// 修改表格字段
		table.on('edit(infoTable)', function(obj) {
			var value = obj.value //得到修改后的值
				,data = obj.data //得到所在行所有键值
				,field = obj.field; //得到字段

			// obj.update({common: value});
			var info = {
				'tag_name':field,
				'id':data.id,
				'bus_inquiry_suppliers_id':data.bus_inquiry_suppliers_id,
				'bus_inquiry_detail_id':data.bus_inquiry_detail_id,
				'value':value
			};
			setContent(info);
		});

		function setContent(data) {
			send_req('Inquiry/editContent', data, function () {
				layer.closeAll('loading');
			});
			return false;
		}

		//监听提交
		form.on('submit(addFormSubmit)', function(d){
			// 增加样式
			$('.site-demo-active').addClass(DISABLED);
			// 增加属性
			$('.site-demo-active').attr('disabled', 'disabled');
			layer.load(); //上传loading
			send_req('Inquiry/quoteInquiry',{
				id:res_data.id,
				// detail_info:layui.table.cache.infoTable,
			},function (res) {
				layer.closeAll('loading');
				layer.msg('提交成功', {icon: 1, time:1500}, function () {
					window.parent.replaceIframe('./html/inquiry/detail.html','id='+id);
				});
			},false)
			return false;
		});

		form.verify({
			num: function(value, item){ // value：表单的值、item：表单的DOM对象
				if (value !== '') {
					var num = Number(value);
					if (isNaN(num) || num< 0) {
						return '价格有误';
					}
				}
			},
		});
    });
</script>
</body>
</html>